<template>
  <div class="book-item">
    <span v-if="!bookInfo.isEdit">{{ bookInfo.title }}</span>
    <input ref="inp" v-if="bookInfo.isEdit" @blur="handleBlur" type="text" :value="bookInfo.title"/>
    <button class="book-edit" @click="handleEdit">编辑</button>
  </div>
</template>

<script>
export default {
  name: "InputItem-Component",
  data() {
    return {
      bookInfo: this.book
    }
  },
  props: ['book'],
  methods: {
    handleEdit() {
      if (Object.hasOwnProperty.call(this.bookInfo, 'isEdit')) {
        this.bookInfo.isEdit = true
      } else {
        this.$set(this.bookInfo, 'isEdit', true)
      }
      // VUE中为了防止修改一次内容，就更新一次视图，需要让执行函数执行完成后，再渲染
      //在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
      // 参考：https://v2.cn.vuejs.org/v2/api/#Vue-nextTick
      this.$nextTick(function (){
        this.$refs.inp.focus()
      })
    },
    handleBlur() {
      this.bookInfo.isEdit = false
      if(!this.$refs.inp.value.trim()){
        alert('输入不能为空')
        return
      }
      if (this.bookInfo.title !== this.$refs.inp.value) {
        this.$bus.$emit('changeBooks', this.bookInfo.id, this.$refs.inp.value)
      }
    }
  }
}
</script>

<style scoped>
.book-item {
  width: 300px;
  padding: 10px 10px;
  border: 1px solid #cccccc;
  margin: 20px 10px;
}

.book-edit {
  float: right;
}
</style>